<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>尚品汇 我的购物车</title>
    <link rel="icon" href="/img/favicon.ico">

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/css/all.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-cart.css" />
    <div th:include="common/head :: head"></div>
</head>

<body>
    <!--head-->
    <!-- 头部栏位 -->
    <!--页面顶部-->
    <div th:include="common/header :: header"></div>

    <div class="cart py-container" id="item">
        <div class="seckill_dev" v-if="show == 1">
            排队中...
        </div>
        <div class="seckill_dev" v-if="show == 2">
            {{message}}
        </div>
        <div class="seckill_dev" v-if="show == 3">
            恭喜取得抢购资格&nbsp;&nbsp;
            <a href="/seckill-confirm.html" target="_blank">去下单</a>
        </div>
        <div class="seckill_dev" v-if="show == 4">
            抢购成功&nbsp;&nbsp;

            <a href="http://order.gmall.com/myOrder.html" target="_blank">我的订单</a>
        </div>
    </div>
    <!-- 底部栏位 -->
    <!--页面底部-->
    <div class="clearfix footer">
        <div class="py-container">
            <div class="footlink">
                <div class="clearfix Mod-list">
                    <div class="yui3-g">
                        <div class="yui3-u-1-6">
                            <h4>购物指南</h4>
                            <ul class="unstyled">
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>生活旅行/团购</li>
                                <li>常见问题</li>
                                <li>购物指南</li>
                            </ul>

                        </div>
                        <div class="yui3-u-1-6">
                            <h4>配送方式</h4>
                            <ul class="unstyled">
                                <li>上门自提</li>
                                <li>211限时达</li>
                                <li>配送服务查询</li>
                                <li>配送费收取标准</li>
                                <li>海外配送</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>支付方式</h4>
                            <ul class="unstyled">
                                <li>货到付款</li>
                                <li>在线支付</li>
                                <li>分期付款</li>
                                <li>邮局汇款</li>
                                <li>公司转账</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>售后服务</h4>
                            <ul class="unstyled">
                                <li>售后政策</li>
                                <li>价格保护</li>
                                <li>退款说明</li>
                                <li>返修/退换货</li>
                                <li>取消订单</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>特色服务</h4>
                            <ul class="unstyled">
                                <li>夺宝岛</li>
                                <li>DIY装机</li>
                                <li>延保服务</li>
                                <li>尚品汇E卡</li>
                                <li>尚品汇通信</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>帮助中心</h4>
                            <img src="./img/wx_cz.jpg">
                        </div>
                    </div>
                </div>
                <div class="Mod-copyright">
                    <ul class="helpLink">
                        <li>关于我们<span class="space"></span></li>
                        <li>联系我们<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>商家入驻<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们</li>
                    </ul>
                    <p>地址：北京市昌平区宏福科技园综合楼6层</p>
                    <p>京ICP备19006430号</p>
                </div>
            </div>
        </div>
    </div>
    <!--页面底部END-->
    <script src="/js/api/seckill.js"></script>
    <script th:inline="javascript">
        var item = new Vue({
            el: '#item',

            data: {
                skuId: [[${ skuId }]],
                seckillCode: [[${ seckillCode }]],
                data: {},
                show: 1,
                code: 211,
                message: '',
                isCheckOrder: false
            },
            //2.html加载完成后执行
            mounted() {
                const timer = setInterval(() => {
                    if (this.code != 211) {
                        clearInterval(timer);
                    }
                    this.hasQualified()
                }, 3000);
                // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
                this.$once('hook:beforeDestroy', () => {
                    clearInterval(timer);
                })
            },
            //1.html加载完成之前执行
            created() {
                this.prepareSeckill();
            },

            methods: {
                prepareSeckill() {
                    seckill.prepareSeckill(this.skuId, this.seckillCode).then(response => {
                        console.log(JSON.stringify(response))
                        if (response.data.code == 200) {
                            this.isCheckOrder = true
                        } else {
                            this.show = 2
                            this.message = response.data.message
                        }

                    })
                },
                hasQualified() {
                    if (!this.isCheckOrder) return
                    seckill.hasQualified(this.skuId).then(response => {
                        debugger
                        this.data = response.data.data
                        this.code = response.data.code
                        console.log(JSON.stringify(this.data))
                        //排队中
                        if (response.data.code == 211) {
                            this.show = 1
                        } else {
                            //秒杀成功
                            if (response.data.code == 215) {
                                this.show = 3
                                this.message = response.data.message
                            } else {
                                if (response.data.code == 218) {
                                    this.show = 4
                                    this.message = response.data.message
                                } else {
                                    this.show = 2
                                    this.message = response.data.message
                                }
                            }
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>
<style>
    .seckill_dev {
        background-color: #fff;
        padding: 44px 30px;
        box-shadow: 0 6px 32px rgba(0, 0, 0, .13);
        margin: 50px auto;
        font-size: 18px;
        text-align: center;
    }
</style>